import Vue from 'vue'
import Router from 'vue-router'
import html from '@/components/cell/html'
import css from '@/components/cell/css'
import js from '@/components/cell/js'
import vue from '@/components/cell/vue'
import node from '@/components/cell/node'
import audio from '@/components/content/audio'
import video from '@/components/content/video'
import input from '@/components/content/inputBox'
import flex from '@/components/content/flex'
import transform from '@/components/content/transform'
import transition from '@/components/content/transition'
import object from '@/components/content/object'
import array from '@/components/content/array'
import function1 from '@/components/content/function'
import express from '@/components/content/express'
import koa2 from '@/components/content/koa2'
import router from '@/components/content/router'
import axios from '@/components/content/axios'
import login from '@/components/box/login'
import content from '@/components/box/content'

Vue.use(Router)

let  path=new Router({
  routes: [
    {path:'/login',
    name:"login",
    component:login
  },
    {path:'/',
    name:"content",
    component:content,
    children:[
      {
        path: '/',
        redirect:'/html'
      },
      {
        path: '/html',
        name: 'html',
        component: html,
        children:[
          {path:'/html',component:audio,redirect:'/html/audio',name:'htmlC'},
          {path:'/html/audio',component:audio},
          {path:'/html/video',component:video},
          {path:'/html/input',component:input},
        ]
      },
        {
        path: '/css',
        name: 'css',
        component: css,
        children:[
          {path:'/css',component:flex,redirect:'/css/flex'},
          {path:'/css/flex',component:flex},
          {path:'/css/transform',component:transform},
          {path:'/css/transition',component:transition},
        ]
      },
      {
        path: '/js',
        name: 'js',
        component: js,
        children:[
          {path:'/js',component:object,redirect:'/js/object'},
          {path:'/js/object',component:object},
          {path:'/js/array',component:array},
          {path:'/js/function',component:function1},
        ]
      },
      {
        path: '/node',
        name: 'node',
        component: node,
        children:[
          {path:'/node',component:express,redirect:'/node/express'},
          {path:'/node/express',component:express},
          {path:'/node/koa2',component:koa2},
        ]
      },
      {
        path: '/vue',
        name: 'vue',
        component: vue,
        children:[
          {path:'/vue',component:router,redirect:'/vue/router'},
          {path:'/vue/router',component:router},
          {path:'/vue/axios',component:axios},
        ]
      },
    ]
  }
  ],
  linkActiveClass:'currency',
  mode: 'history',
});

path.beforeEach((to,from,next)=>{
  if(window.sessionStorage.data){
         if(to.path=='/login'){
           next({path:'/'});
         }else{
          //  next();
          const matched=path.getMatchedComponents(to);
          // console.log(to);
          // console.log(from);
          if(matched.length>0){
            next()
          }else{
                next({name: 'htmlC',});
          }
         }
  }else{
    if(to.path=='/login'){
      next();
    }else{
      next({path:'/login'})
    }
  }
})
// path.beforeEach((to, from, next) => {
//   const matched = path.getMatchedComponents(to); // 是否有匹配组件
//   if (matched.length > 0) {
//     next();
//   } else {
//     next({
//       name: 'htmlC',
//     });
//   }
// });

export default path;
